BasketStore

0

Equipamentos de Basquete

Os melhores produtos para você jogar como um profissional

Ver Produtos

Categorias em Destaque

Bolas

Vestuário

Calçados

Acessórios

Nossos Produtos

Receba Nossas Ofertas

Inscreva-se em nossa newsletter e receba ofertas exclusivas e novidades

Seu Carrinho

Seu carrinho está vazio

Adicione produtos para continuar

Total: $0.00
/* style.css */ /* Custom styles beyond Tailwind */ body { scroll-behavior: smooth; } .filter-btn { background-color: #f3f4f6; color: #111827; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; transition: all 0.3s ease; } .filter-btn:hover { background-color: #e5e7eb; } .filter-btn.active { background-color: #ea580c; color: white; } .product-card { transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .product-card .product-image { height: 200px; object-fit: contain; } .add-to-cart-btn { transition: all 0.3s ease; } .price-tag { position: absolute; top: 10px; right: 10px; background-color: rgba(234, 88, 12, 0.9); color: white; padding: 0.25rem 0.5rem; border-radius: 9999px; font-weight: 600; } .cart-item-image { width: 60px; height: 60px; object-fit: contain; } #cart-sidebar { overflow-y: auto; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in; } /* Media queries */ @media (max-width: 640px) { .hero-section { height: 60vh; } } /* script.js */ document.addEventListener('DOMContentLoaded', function() { // Products data const products = [ { id: 1, name: "Bola de Basquete Oficial", price: 29.99, category: "bolas", image: "https://images.unsplash.com/photo-1519861531473-9200262188bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80", description: "Bola de basquete oficial com ótima aderência e durabilidade para jogos profissionais." }, { id: 2, name: "Camisa de Treino", price: 24.99, category: "vestuario", image: "https://images.unsplash.com/photo-1515186193590-f3adf465a620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Camisa respirável para treinos intensos, com tecido de alta performance." }, { id: 3, name: "Shorts de Basquete", price: 19.99, category: "vestuario", image: "https://images.unsplash.com/photo-1562187410-bdd02ba20007?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Shorts confortáveis e leves para máxima mobilidade durante o jogo." }, { id: 4, name: "Meias Esportivas (par)", price: 12.99, category: "vestuario", image: "https://images.unsplash.com/photo-1617238209000-be5f850c9542?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Meias de alta compressão para melhor suporte durante atividades físicas." }, { id: 5, name: "Munhequeira (par)", price: 10.00, category: "acessorios", image: "https://images.unsplash.com/photo-1614632537197-38a17061c2bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Munhequeiras absorventes para proteção e estilo durante os jogos." }, { id: 6, name: "Bandana/Faixa de Cabeça", price: 14.99, category: "acessorios", image: "https://images.unsplash.com/photo-1610459677371-cdea9ad3136c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1452&q=80", description: "Bandana ajustável para absorver suor e manter o foco durante o jogo." }, { id: 7, name: "Protetor Bucal", price: 10.00, category: "acessorios", image: "https://images.unsplash.com/photo-1609899004540-13e38394a1bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Protetor bucal de alta qualidade para máxima proteção durante jogos intensos." }, { id: 8, name: "Joelheira (par)", price: 22.99, category: "acessorios", image: "https://images.unsplash.com/photo-1530297173434-295026e8675c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Joelheiras acolchoadas para proteção contra impactos e prevenção de lesões." }, { id: 9, name: "Cotoveleira (par)", price: 18.99, category: "acessorios", image: "https://images.unsplash.com/photo-1591195853828-11db59a44f6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Cotoveleiras com design anatômico para conforto e proteção." }, { id: 10, name: "Rede para Cesta", price: 15.99, category: "acessorios", image: "https://images.unsplash.com/photo-1628779238951-be2c9f2a59f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Rede durável e resistente às intempéries para uso profissional ou recreativo." }, { id: 11, name: "Bomba de Ar", price: 19.99, category: "acessorios", image: "https://images.unsplash.com/photo-1594380394249-11a5f920e8c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Bomba de ar compacta e eficiente para manter suas bolas sempre calibradas." }, { id: 12, name: "Agulhas para Bomba (conjunto)", price: 10.00, category: "acessorios", image: "https://images.unsplash.com/photo-1583004231608-3cd293aaa18e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Conjunto com 5 agulhas de reposição para bomba de ar." }, { id: 13, name: "Bolsa para Bola", price: 24.99, category: "acessorios", image: "https://images.unsplash.com/photo-1622560480654-d96214fdc887?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Bolsa resistente com alça ajustável para transportar sua bola com segurança." }, { id: 14, name: "Garrafa d'água especial", price: 14.99, category: "acessorios", image: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Garrafa esportiva de 750ml com medidor de consumo e bico prático." }, { id: 15, name: "Toalha esportiva", price: 16.99, category: "acessorios", image: "https://images.unsplash.com/photo-1563198804-b144dfc1661c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Toalha super absorvente e compacta, ideal para treinos e jogos." }, { id: 16, name: "Antitranspirante para atletas", price: 11.99, category: "acessorios", image: "https://images.unsplash.com/photo-1621844741258-593e054dc5f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Antitranspirante de longa duração especialmente formulado para atletas." }, { id: 17, name: "Caderno de táticas", price: 13.99, category: "treinamento", image: "https://images.unsplash.com/photo-1550399105-c4db5fb85c18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80", description: "Caderno com diagramas de quadra para planejamento de jogadas e estratégias." }, { id: 18, name: "Apito para treinador", price: 10.99, category: "treinamento", image: "https://images.unsplash.com/photo-1584917865442-de436aaaa2ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Apito profissional de alta potência para treinadores." }, { id: 19, name: "Cronômetro", price: 18.99, category: "treinamento", image: "https://images.unsplash.com/photo-1598547110277-5c609a6c7e50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Cronômetro digital de precisão para treinos e competições." }, { id: 20, name: "Cones de treino (conjunto)", price: 29.99, category: "treinamento", image: "https://images.unsplash.com/photo-1579952363873-27f3bade9f55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Conjunto com 10 cones coloridos para treinamento de agilidade e demarcação." }, { id: 21, name: "Quadro tático", price: 34.99, category: "treinamento", image: "https://images.unsplash.com/photo-1557318041-1ce374d55ebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1430&q=80", description: "Quadro tático magnético apagável para planejamento de jogadas." }, { id: 22, name: "Fita de marcação de quadra", price: 15.99, category: "treinamento", image: "https://images.unsplash.com/photo-1573812680471-e9f31cbc9b6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Fita adesiva resistente para marcação temporária de quadras." }, { id: 23, name: "Luvas de treino", price: 22.99, category: "treinamento", image: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1494&q=80", description: "Luvas especiais para melhorar a aderência e o controle da bola durante treinos." }, { id: 24, name: "Tênis de basquete iniciante", price: 49.99, category: "vestuario", image: "https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Tênis com design moderno, confortável e com boa tração para iniciantes." }, { id: 25, name: "Kit de manutenção para bola", price: 19.99, category: "acessorios", image: "https://images.unsplash.com/photo-1583001809873-a128495da465?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "Kit completo para limpeza e manutenção de bolas de basquete." }, { id: 26, name: "Tabela de basquete mini", price: 39.99, category: "treinamento", image: "https://images.unsplash.com/photo-1595581220340-a605e85242e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Tabela de basquete para porta ou parede, ideal para treinar arremessos em casa." }, { id: 27, name: "Squeeze personalizado", price: 16.99, category: "acessorios", image: "https://images.unsplash.com/photo-1536353284924-9220c464e262?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1370&q=80", description: "Squeeze esportivo resistente com design inspirado no basquete." }, { id: 28, name: "Suplemento energético", price: 29.99, category: "acessorios", image: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1464&q=80", description: "Suplemento em pó para preparar bebidas energéticas para antes e durante os jogos." }, { id: 29, name: "Pulseira de silicone", price: 10.99, category: "acessorios", image: "https://images.unsplash.com/photo-1533681018184-83ca32f8e6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", description: "Pulseira de silicone com frases motivacionais para jogadores de basquete." }, { id: 30, name: "DVD de treinamento", price: 24.99, category: "treinamento", image: "https://images.unsplash.com/photo-1626278664285-f796b9ee7806?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", description: "DVD com técnicas avançadas de treinamento para jogadores de todos os níveis." } ]; // Cart setup let cart = []; let currentFilter = 'all'; let currentSort = 'default'; // DOM elements const productsContainer = document.getElementById('products-container'); const filterButtons = document.querySelectorAll('.filter-btn'); const sortSelect = document.getElementById('sort'); const cartIcon = document.querySelector('.fa-shopping-cart').parentElement; const cartSidebar = document.getElementById('cart-sidebar'); const closeCart = document.getElementById('close-cart'); const overlay = document.getElementById('overlay'); const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); const cartCount = document.getElementById('cart-count'); const checkoutBtn = document.getElementById('checkout-btn'); const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); const productModal = document.getElementById('product-modal'); const closeModal = document.getElementById('close-modal'); // Display products function displayProducts() { // Filter products let filteredProducts = products; if (currentFilter !== 'all') { filteredProducts = products.filter(product => product.category === currentFilter); } // Sort products switch(currentSort) { case 'price-asc': filteredProducts.sort((a, b) => a.price - b.price); break; case 'price-desc': filteredProducts.sort((a, b) => b.price - a.price); break; case 'name-asc': filteredProducts.sort((a, b) => a.name.localeCompare(b.name)); break; default: // Default sort is by id filteredProducts.sort((a, b) => a.id - b.id); } // Clear current products productsContainer.innerHTML = ''; // Add products to the page filteredProducts.forEach(product => { const productCard = document.createElement('div'); productCard.className = 'product-card bg-white rounded-lg shadow-md overflow-hidden relative'; productCard.innerHTML = `
$${product.price.toFixed(2)}
${product.name}

${product.name}

${product.description}

`; productsContainer.appendChild(productCard); }); // Add event listeners to the new buttons document.querySelectorAll('.add-to-cart-btn').forEach(button => { button.addEventListener('click', addToCart); }); document.querySelectorAll('.view-product').forEach(button => { button.addEventListener('click', viewProduct); }); } // Filter products filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to the clicked button this.classList.add('active'); // Update current filter currentFilter = this.getAttribute('data-filter'); // Display products with the new filter displayProducts(); }); }); // Sort products sortSelect.addEventListener('change', function() { currentSort = this.value; displayProducts(); }); // Add to cart function function addToCart(e) { const productId = parseInt(e.currentTarget.getAttribute('data-id')); const product = products.find(p => p.id === productId); // Check if the product is already in cart const existingItem = cart.find(item => item.id === productId); if (existingItem) { existingItem.quantity++; } else { cart.push({...product, quantity: 1}); } // Update cart UI updateCart(); // Show cart sidebar cartSidebar.classList.remove('translate-x-full'); overlay.classList.remove('hidden'); } // View product details function viewProduct(e) { const productId = parseInt(e.currentTarget.getAttribute('data-id')); const product = products.find(p => p.id === productId); // Update modal content const modalContent = document.querySelector('.product-modal-content'); modalContent.innerHTML = `
${product.name}

${product.name}

$${product.price.toFixed(2)}

${product.description}

Categoria:

${product.category}

Quantidade:

`; // Add event listeners for quantity buttons const decreaseBtn = modalContent.querySelector('.decrease-qty'); const increaseBtn = modalContent.querySelector('.increase-qty'); const qtyInput = modalContent.querySelector('.qty-input'); decreaseBtn.addEventListener('click', () => { if (qtyInput.value > 1) { qtyInput.value = parseInt(qtyInput.value) - 1; } }); increaseBtn.addEventListener('click', () => { qtyInput.value = parseInt(qtyInput.value) + 1; }); // Add to cart from modal const addToCartBtn = modalContent.querySelector('.add-to-cart-modal'); addToCartBtn.addEventListener('click', () => { const quantity = parseInt(qtyInput.value); const existingItem = cart.find(item => item.id === product.id); if (existingItem) { existingItem.quantity += quantity; } else { cart.push({...product, quantity: quantity}); } updateCart(); productModal.classList.add('hidden'); overlay.classList.add('hidden'); setTimeout(() => { cartSidebar.classList.remove('translate-x-full'); overlay.classList.remove('hidden'); }, 300); }); // Show modal productModal.classList.remove('hidden'); overlay.classList.remove('hidden'); } // Update cart function function updateCart() { // Update cart items display if (cart.length === 0) { cartItems.innerHTML = `

Seu carrinho está vazio

Adicione produtos para continuar

`; } else { cartItems.innerHTML = ''; cart.forEach(item => { const cartItem = document.createElement('div'); cartItem.className = 'cart-item flex items-center border-b py-3'; cartItem.innerHTML = ` ${item.name}

${item.name}

${item.quantity}
$${(item.price * item.quantity).toFixed(2)}
`; cartItems.appendChild(cartItem); }); // Add event listeners for cart item buttons document.querySelectorAll('.cart-decrease').forEach(button => { button.addEventListener('click', decreaseQuantity); }); document.querySelectorAll('.cart-increase').forEach(button => { button.addEventListener('click', increaseQuantity); }); document.querySelectorAll('.remove-item').forEach(button => { button.addEventListener('click', removeItem); }); } // Update cart total const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); cartTotal.textContent = `$${total.toFixed(2)}`; // Update cart count const count = cart.reduce((sum, item) => sum + item.quantity, 0); cartCount.textContent = count; } // Cart item quantity functions function decreaseQuantity(e) { const productId = parseInt(e.currentTarget.getAttribute('data-id')); const cartItem = cart.find(item => item.id === productId); if (cartItem.quantity > 1) { cartItem.quantity--; } else { cart = cart.filter(item => item.id !== productId); } updateCart(); } function increaseQuantity(e) { const productId = parseInt(e.currentTarget.getAttribute('data-id')); const cartItem = cart.find(item => item.id === productId); cartItem.quantity++; updateCart(); } function removeItem(e) { const productId = parseInt(e.currentTarget.getAttribute('data-id')); cart = cart.filter(item => item.id !== productId); updateCart(); } // Cart sidebar functions cartIcon.addEventListener('click', function(e) { e.preventDefault(); cartSidebar.classList.remove('translate-x-full'); overlay.classList.remove('hidden'); }); closeCart.addEventListener('click', function() { cartSidebar.classList.add('translate-x-full'); overlay.classList.add('hidden'); }); overlay.addEventListener('click', function() { cartSidebar.classList.add('translate-x-full'); productModal.classList.add('hidden'); overlay.classList.add('hidden'); }); // Mobile menu mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); }); // Modal close button closeModal.addEventListener('click', function() { productModal.classList.add('hidden'); overlay.classList.add('hidden'); }); // Checkout button checkoutBtn.addEventListener('click', function() { if (cart.length > 0) { alert('Obrigado por sua compra! Total: $' + cart.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2)); cart = []; updateCart(); cartSidebar.classList.add('translate-x-full'); overlay.classList.add('hidden'); } }); // Initialize products displayProducts(); });